<template>
	<view class="elm-wrapper wrapperLayer"
		:style="optionsCurrent==3?'background-color:#1088FE;':'background-color:#62BC00;'">
		<view class="flexbox borderBox colCen" :style="optionsCurrent==3?'background-color:#1088FE;':'background-color:#62BC00;'">
			<view class="topbarbox"></view>
			<view class="leftimgbox rowCenBet" @tap="back()">
				<view class="shadow rowCenCen" style="background:rgba(0,0,0,0);">
					<view class="iconfont" style="color: rgb(255, 255, 255);">&#xe630;
					</view>
				</view>
				<view class="pagetitle" :style="'opacity:'+ (0+scrollTop/100)+';color:' + ((scrollTop/100)>0.5?'#FFF;':'#222222;')">
					饿了么红包
				</view>
				<view class="shadow rowCenCen" style="opacity: 0;background-color:#FFF;">
					<view class="iconfont" style="color: rgb(255, 255, 255);">&#xe630;</view>
				</view>
			</view>
		</view>
		<view class="options-bar-content rowCenCen">
			<view class="center-container rowCenBet">
				<block v-for="(items,index) in optionsList" :key="index">
					<view class="items-content rowCenCen"
						:style="optionsCurrent==items.type?items.type==3?'color:#1088FE;':'color:#62BC00;':''"
						@tap="navTap(items.type,index)">
						<view>{{items.label}}</view>
					</view>
				</block>
                <div class="items-active" :style="{'transform':'translateX('+activeIndex * 120 +'rpx)'}"></div>
			</view>
		</view>

		<image class="pageBac"
			:src="optionsCurrent==3?'https://hxshapp.oss-cn-beijing.aliyuncs.com/weapp/elm.png':'https://hxshapp.oss-cn-beijing.aliyuncs.com/weapp/elmgs3.png'"
			mode="aspectFill">
		</image>

		<view class="center-code-container rowCen borderBox">
			<view class="white-content colCen">
				<view class="dashed-content rowCenCen"
					:style="optionsCurrent==3?'border-bottom: 1rpx dashed rgba(16, 136, 254, 0.6);':'border-bottom: 1rpx dashed rgba(98, 188, 0, 0.6);'">
					<image class="stepImg"
						:src="optionsCurrent==3?'https://hxshapp.oss-cn-beijing.aliyuncs.com/weapp/elmstep.png':'https://hxshapp.oss-cn-beijing.aliyuncs.com/weapp/greenstep.png'"
						mode="">
					</image>
				</view>

				<image class="miniCodeImg" :src="pageInfo.wxQrcodeUrl" mode="aspectFit"></image>

				<view class="getBtn-container rowCenCen" @tap="jumpMini()">
					<view>领红包点外卖①</view>
				</view>
				
				<view  v-if="iSAppletJump" class="getBtn-container rowCenCen" @tap="jumpShangJinMini()">
					<view>领加餐红包②</view>
				</view>

				<!-- <view class="shareBtn-container rowCenCen" @tap="goshare()" :class="optionsCurrent==5?'greenbtn':''">
					<view>分享海报</view>
				</view> -->
			</view>
		</view>

		<view class="rulesContent colCen borderBox">
			<view class="txt-title">
				规则说明：
			</view>
			<view class="richtext-content">
				1.无论用不用第一个红包,都要先领取,否则可能无返利;</br>
				2.加餐红包和外卖红包不冲突,可以同时领取,哪个红包大用哪个;</br>
				3.无论饿了么新老用户,外卖红包和加餐红包每个手机号每天均可领一次,红包金额随机发放;</br>
				4.领券下单均有返利,返利按照订单实际支付金额为准;5.必须使用从本页获得的红包码领券,领券后使用红包下单才有返利;</br>
				6.领券后在红包有效期内下单均有返利;</br>
				7.分享红包海报给好友,好友领券下单后分享人也可以获得返利;</br>
				8.饿了么绑定的手机号,需与领券登录的手机号一致;8.下单后10分钟内会有订单返现提醒;</br>
			</view>
		</view>
		
	
	</view>
</template>

<script>
	import titleBar from '../../components/backTitlebar.vue';
	import common from '../../utils/utils.js';
	export default {

		data() {
			return {
				optionsCurrent: 3,
                activeIndex:0,// 当前选中的index
				scrollTop: 0,
				optionsList: [{
						label: "外卖",
						type: 3
					},
					{
						label: "果蔬",
						type: 5
					}
				],
				pageInfo: '',
				empowerModel: false,
				iSAppletJump: true
			}
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop
		},
		onLoad() {
			this.IntiData()
			this.iSAppletJump == getApp().globalData.appinfo.isAppletJump;
			console.log("==========iSAppletJump=========="+this.iSAppletJump)
		},
		onPullDownRefresh() {
			this.IntiData()
		},
		methods: {
			IntiData() {
				// uni.showLoading()
				this.$http.post('localLife/eleme/' + this.optionsCurrent).then(res => {
					// uni.hideLoading()
					uni.stopPullDownRefresh()
					this.pageInfo = res
				})
			},
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			navTap(type,index) {
				if (this.optionsCurrent != type) {
					this.optionsCurrent = type
                    this.activeIndex = index
					if (this.optionsCurrent == 5) {
						uni.setNavigationBarColor({
							frontColor: '#ffffff',
							backgroundColor: '#62BC00'
						})
					} else {
						uni.setNavigationBarColor({
							frontColor: '#ffffff',
							backgroundColor: '#1088FE'
						})
					}
					this.IntiData()
				}
			},
			jumpMini() {
				const userInfo = uni.getStorageSync('userData')
				/* if (userInfo.tbAccount) { */
				// 是否开启小程序跳转权限
					var isAppletJump =  getApp().globalData.appinfo.isAppletJump;
					console.log("==========="+isAppletJump)
					if(isAppletJump){
						var appId = this.pageInfo.appid;
						var appPath = this.pageInfo.appPath;
						plus.share.getServices(function(res) {
						
							var sweixin = null;
							for (var i = 0; i < res.length; i++) {
						
								var t = res[i];
								if (t.id == 'weixin') {
									sweixin = t;
						
								}
							}
						
							if (sweixin) {
								sweixin.launchMiniProgram({
									id: appId,
									type: 0, //0 正式 1 测试 2 体验  小程序的版本
									path: appPath //这里你要跳的路径，可以传值
								});
							}
						}, function(res) {
							console.log(JSON.stringify(res));
						});
				/* 	}else{
						// 不支持唤醒微信饿了么  那就唤醒淘宝饿了么
						this.$http.post('localLife/eleme/' + this.optionsCurrent).then(res => {
							console.log("==========="+JSON.stringify(res))
							const plug = uni.requireNativePlugin('Html5app-Baichuan')
							plug.detailPage({
								url: res.murl,
								"openType": 1
							}, result => {
								console.log(result);
							});
						})
					} */
					
				} else{
					// 不支持唤醒微信饿了么  那就唤醒淘宝饿了么 
					this.$http.post('localLife/eleme/' + this.optionsCurrent).then(res => {
						console.log("==========="+JSON.stringify(res))
						
						
						
/* 						const plug = uni.requireNativePlugin('Html5app-Baichuan')
						plug.detailPage({
							url: res.murl,
							"openType": 1
						}, result => {
							console.log(result);
						});
						 */
						
						// #ifdef APP-PLUS
						if (plus.runtime.isApplicationExist({
							pname: 'com.taobao.taobao',
								action: 'taobao://'
							})) {
							const plug = uni.requireNativePlugin('xiguazhu-baichuan')
							plug.detailPage({
								url: res.murl,
								"openType": 0
							}, result => {
							//	console.log(result); 
							});
						} else {
							uni.navigateTo({
								url: '../webView/webView?url=' + res.murl
							})
						}
						// #endif
						
						
						
						
						
					})
				}
				
				
				
			},
			
			jumpShangJinMini(){
				this.$http.post('localLife/elemeshangjin').then(res => {
					uni.hideLoading()
					uni.stopPullDownRefresh()
					//this.pageInfo = res
					var appId = res.appid;
					var appPath = res.appPath;
					plus.share.getServices(function(res) {
					
						var sweixin = null;
						for (var i = 0; i < res.length; i++) {
					
							var t = res[i];
							if (t.id == 'weixin') {
								sweixin = t;
					
							}
						}
					
						if (sweixin) {
							sweixin.launchMiniProgram({
								id: appId,
								type: 0, //0 正式 1 测试 2 体验  小程序的版本
								path: appPath //这里你要跳的路径，可以传值
							});
						}
					}, function(res) {
						console.log(JSON.stringify(res));
					});
				})
			},
			goshare() {
				uni.navigateTo({
					url: '/pages/mine/inviteXcx?type=6&qrCode='+this.pageInfo.wxQrcodeUrl
				})
			},
			closeMdl() {
				this.empowerModel = false
				this.pddempowerModel = false
			},
			
			updataUser() {
				this.userInfo = utils.getCacheSync('userData')
				this.$http.get('member/getInfo', {}, true).then((res) => {
					this.userInfo = res
					utils.setCache('userData', res)
				})
			},
		}
	}
</script>

<style lang="scss">
	.elm-wrapper {
		width: 100%;
		min-height: 100vh;
		background-color: #1088FE;
		.flexbox {
			position: fixed;
			z-index: 100;
			width: 100%;
			padding: 0 32rpx;
		
			.leftimgbox {
				width: 100%;
				height: 90rpx;
		
				.shadow {
					width: 50rpx;
					height: 50rpx;
					font-size: 28rpx;
					border-radius: 50%;
				}
			}
		}

		.options-bar-content {
			width: 100%;
			margin-top: 168rpx;

			.center-container {
                position: relative;
				width: 240rpx;
				height: 58rpx;
				background: rgba(254, 254, 254, 0.3);
				border-radius: 29rpx;
				.items-content {
                    position: relative;
					width: 120rpx;
					height: 58rpx;
					background: transparent;
					border-radius: 29rpx;
					font-size: 28rpx;
					font-weight: 500;
                    z-index: 1;
					color: rgba(255, 255, 255, 0.7);
				}
                .items-active {
                    position: absolute;
                    left: 0;
                    @extend .items-content;
                    background: #FEFEFE;
                    z-index: 0;
                    transition:0.3s ease-out;
                }
                .green{
                    color:#62BC00;
                }
                .blue{
                    color:#1088FE;
                }
			}
		}

		.pageBac {
			width: 100%;
			height: 294rpx;
			margin-top: 20rpx;
		}

		.center-code-container {
			width: 100%;
			padding: 0 28rpx;

			.white-content {
				width: 100%;
				padding-bottom: 50rpx;
				background-color: #FFFFFF;
				border-radius: 16rpx;

				.dashed-content {
					width: 100%;
					height: 194rpx;

					.stepImg {
						width: 540rpx;
						height: 107rpx;
					}
				}

				.miniCodeImg {
					width: 288rpx;
					height: 288rpx;
					margin: 70rpx 0;
				}

				.getBtn-container {
					width: 580rpx;
					height: 78rpx;
					border-radius: 39rpx;
					background: linear-gradient(0deg, #F1B641 0%, #FFCE6D 100%);
					font-size: 34rpx;
					font-weight: 500;
					color: #C03F11;
					margin-top: 15rpx;
				}

				.shareBtn-container {
					
					border: 1rpx solid #109BFE;
				//	border-radius: 31rpx;
				//	font-size: 30rpx;
					//font-weight: 400;
					color: #0D7BE8;
					margin-top: 30rpx;
					
					
					width: 580rpx;
					height: 78rpx;
					border-radius: 39rpx;
				//	background: linear-gradient(0deg, #F1B641 0%, #FFCE6D 100%);
					font-size: 34rpx;
					font-weight: 500;
					//color: #C03F11;
				}

				.greenbtn {
					color: #62BC00;
					border-color: #62BC00;
				}
			}
		}

		.rulesContent {
			width: 100%;
			padding: 0 28rpx;
			margin-top: 25rpx;

			.txt-title {
				width: 100%;
				font-size: 32rpx;
				font-weight: 500;
				color: #FFFFFF;
				line-height: 48rpx;
				margin-bottom: 20rpx;
			}

			.richtext-content {
				width: 100%;
				margin-bottom: 40rpx;
				font-size: 26rpx;
				font-weight: 400;
				line-height: 48rpx;
				color: #FFFFFF;
			}
		}
	}
</style>
